<template>
  <el-dialog model-value="dialogVisible" :title="dialogTitle" width="60%" @close="handleClose">
    <div style="max-height: 520px;overflow: auto;">
      <el-form :inline="true" ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="选择样木：" prop="tree1">
          <el-cascader v-model="treeId" :options="treeSelect" :props="props_cascader" clearable placeholder="请选择"
            style="width: 350px;" />
        </el-form-item>

        <el-form-item label="样木ID" prop="tree" style="width: 250px;">
          <el-input v-model="form.tree" disabled />
        </el-form-item>

        <br> 树冠鲜重: <br>
        <el-form-item label="上部" prop="crownT">
          <el-input-number v-model="form.crownT" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="中部" prop="crownC">
          <el-input-number v-model="form.crownC" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="下部" prop="crownB">
          <el-input-number v-model="form.crownB" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>

        <br> 干鲜重: <br>
        <el-form-item label="上部" prop="trunkT">
          <el-input-number v-model="form.trunkT" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="中部" prop="trunkC">
          <el-input-number v-model="form.trunkC" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="下部" prop="trunkB">
          <el-input-number v-model="form.trunkB" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>

        <br> 枝鲜重: <br>
        <el-form-item label="上部" prop="branchT">
          <el-input-number v-model="form.branchT" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="中部" prop="branchC">
          <el-input-number v-model="form.branchC" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="下部" prop="branchB">
          <el-input-number v-model="form.branchB" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>

        <br> 叶鲜重: <br>
        <el-form-item label="上部" prop="leafT">
          <el-input-number v-model="form.leafT" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="中部" prop="leafC">
          <el-input-number v-model="form.leafC" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="下部" prop="leafB">
          <el-input-number v-model="form.leafB" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>

        <br> 根鲜重: <br>
        <el-form-item label="根茎" prop="rhizome">
          <el-input-number v-model="form.rhizome" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="粗根" prop="root_large">
          <el-input-number v-model="form.root_large" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="细根" prop="root_fine">
          <el-input-number v-model="form.root_fine" :min="0" :precision="2" :step="0.1" controls-position="right">
            <template #suffix> <span>kg</span> </template>
          </el-input-number>
        </el-form-item>

        <el-form-item label="备注" prop="remark" style="width: 250px;">
          <el-input v-model="form.remark" type="textarea" :rows="1" />
        </el-form-item>

      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import api, { getServerUrl } from "@/util/request";
import { ElMessage } from 'element-plus'

const treeId = ref(null)
let treeSelect = ref([])

// 设置hover触发子菜单
const props_cascader = {
  expandTrigger: 'hover',
}
// 初始化字段列表
const initSelect = async () => {
  await api.get("tree/select").then((res) => {
    treeSelect.value = res.data.data
  })
}
initSelect()

const props = defineProps(
  {
    id: {
      type: Number,
      default: -1,
      required: true
    },
    dialogTitle: {
      type: String,
      default: '',
      required: true
    },
    dialogVisible: {
      type: Boolean,
      default: false,
      required: true
    }
  }
)

const form = ref({
  id: -1,
  tree: 81,

  crownT: null,
  crownC: null,
  crownB: null,

  trunkT: null,
  trunkC: null,
  trunkB: null,

  branchT: null,
  branchC: null,
  branchB: null,

  leafT: null,
  leafC: null,
  leafB: null,

  rhizome: null,
  root_large: null,
  root_fine: null,

  remark: '',
})


const rules = ref({
  tree: [
    { required: true, message: '请选择样木！' },
    { type: 'integer', message: '样木编号须为整数!', trigger: 'blur' }
  ],
  TH: [
    { type: 'number', message: '必须为数字', trigger: 'blur' },
  ]
})

const formRef = ref(null)


const getTreeFW = async (tree_id) => {
  console.log('@getTreeFW', tree_id)
  await api.get('treefw/gettreefw?tree_id=' + tree_id).then((res) => {
    if (res.data.code == 200) {
      form.value = res.data.data;
    } else {
      form.value = {
        id: -1, tree: tree_id,
        crownT: null, crownC: null, crownB: null,
        trunkT: null, trunkC: null, trunkB: null,
        branchT: null, branchC: null, branchB: null,
        leafT: null, leafC: null, leafB: null,
        rhizome: null, root_large: null, root_fine: null,
        remark: '',
      }
    }
    console.log('@gettreefw', res.data)
  })
}

// 监听 form.tree 变化
watch(treeId, (newVal) => {
  if (newVal) {
    console.log('@已选择样木：', newVal[3])
    // treeId.value = newVal[3]
    form.value.tree = newVal[3]
    getTreeFW(newVal[3])
  } else {
    form.value.tree = null
  }
})

const initFormData = async (id) => {
  await api.get("treefw/action?id=" + id).then((res) => {
    if (res.data.code == 200) {
      console.log(res.data.data)
      form.value = res.data.data;
      // treeId.value = res.data.data.tree
    } else {
      form.value = {
        id: -1, tree: null,
        crownT: null, crownC: null, crownB: null,
        trunkT: null, trunkC: null, trunkB: null,
        branchT: null, branchC: null, branchB: null,
        leafT: null, leafC: null, leafB: null,
        rhizome: null, root_large: null, root_fine: null,
        remark: '',
      }
    }
  });


  // treeId.value = form.value.tree
}

watch(
  () => props.dialogVisible,
  () => {
    let id = props.id;
    console.log('@dialog id=', id)
    if (id != -1) {
      // initFormData(id)

      getTreeFW(id)
    } else {
      form.value = {
        id: -1,
        tree: null,

        crownT: null,
        crownC: null,
        crownB: null,

        trunkT: null,
        trunkC: null,
        trunkB: null,

        branchT: null,
        branchC: null,
        branchB: null,

        leafT: null,
        leafC: null,
        leafB: null,

        rhizome: null,
        root_large: null,
        root_fine: null,

        remark: '',
      }
    }

  }
)


const emits = defineEmits(['update:modelValue', 'initTreeList'])

const handleClose = () => {
  emits('update:modelValue', false)
  treeId.value = null
}

const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let result = await api.post("treefw/save", form.value);
      let data = result.data;
      if (data.code == 200) {
        ElMessage.success(data.msg)
        formRef.value.resetFields();
        emits("initTreeList")
        handleClose();
      } else {
        ElMessage.error(data.msg);
      }
    } else {
      console.log("字段校验失败！")
    }
  })
}

</script>

<style scoped></style>
